<template>
  <!-- 悬浮按钮 -->
  <div class="contact-float">
    <button class="contact-main-btn" @click="onMainClick">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2v8a2 2 0 01-2 2H9a2 2 0 01-2-2V9a2 2 0 012-2h6zm-3 0V5m0 14v-2"/></svg>
      <span class="ml-2">联系我们</span>
    </button>
    <!-- 弹层 -->
    <transition name="fade">
      <div class="contact-panel" v-if="showPanel">
        <div class="contact-header">
          <span>联系我们</span>
          <button @click="showPanel = false"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
        </div>
        <div class="contact-content">
          <div class="flex flex-col items-center gap-3 py-2">
            <div class="phone-label">联系电话</div>
            <div class="phone-number">19928872570</div>
            <div v-if="copySuccessMessage" class="copy-success-message">{{ copySuccessMessage }}</div>
            <div class="phone-actions">
              <a :href="'tel:19928872570'" @click.prevent="dialNow" class="phone-call-btn">立即拨打</a>
              <button @click="copyPhoneNumber" class="phone-copy-btn">复制号码</button>
            </div>
            <div class="qr-zone flex flex-col items-center mt-5">
              <div class="font-bold mb-2">微信扫码</div>
              <img :src="qrSrc" @error="handleQrError" alt="微信二维码" class="w-32 h-32 rounded-lg shadow" />
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import qrCodeImage from '@/assets/wacht/二维码.png'
const showPanel = ref(false)
const copySuccessMessage = ref('')
const qrSrc = ref(qrCodeImage)
const isMobile = () => {
  if (typeof navigator === 'undefined') return false
  const ua = navigator.userAgent || navigator.vendor || ''
  return /android|iphone|ipad|ipod|windows phone|mqqbrowser|ucbrowser|harmonyos/i.test(ua)
}
const dialNow = () => {
  window.location.href = 'tel:19928872570'
}
const onMainClick = () => {
  if (isMobile()) {
    dialNow()
  } else {
    showPanel.value = true
  }
}
const copyPhoneNumber = async () => {
  try {
    await navigator.clipboard.writeText('19928872570')
    copySuccessMessage.value = '✓ 电话号码已复制到剪贴板'
    setTimeout(() => copySuccessMessage.value = '', 2000)
  } catch {
    copySuccessMessage.value = '✗ 复制失败，请手动复制'
    setTimeout(() => copySuccessMessage.value = '', 2000)
  }
}
const handleQrError = () => {
  // 如果导入的图片加载失败，设置为空
  qrSrc.value = ''
}
</script>

<style scoped>
.contact-float {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.contact-main-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  color: #fff;
  padding: 14px 24px;
  font-size: 16px;
  border: none;
  border-radius: 32px;
  box-shadow: 0 2px 8px rgba(59,130,246,0.07);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
  gap: 4px;
  transition: all .18s;
}
.contact-main-btn:hover {
  box-shadow: 0 6px 24px rgba(59,130,246,0.19);
  background: linear-gradient(135deg, #2563eb 0%, #6366f1 100%);
}
.contact-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 48px -8px rgba(59,130,246,0.23);
  width: 320px;
  max-width: calc(99vw - 30px);
  margin-top: 16px;
  padding: 0;
}
.contact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 10px 24px;
  border-bottom: 1px solid #f0f1f3;
  font-size: 18px;
  font-weight: 700;
}
.contact-header button {
  background: #f2f3fb;
  border: none;
  border-radius: 8px;
  padding: 3px 6px;
  cursor: pointer;
  color: #888;
}
.contact-header button:hover {
  background: #e5e7eb;
  color: #111;
}
.contact-content {
  padding: 10px 18px 24px 18px;
  min-height: 180px;
  max-width: 308px;
}
.phone-label {
  color: #4b5563;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
  opacity: 0.85;
}
.phone-number {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.copy-success-message {
  background: #d1fae5;
  color: #065f46;
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 14px;
  margin-bottom: 10px;
}
.phone-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 2px;
}
.phone-call-btn,
.phone-copy-btn {
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  background: #eff6ff;
  color: #2563eb;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(60,62,112,0.06);
  transition: background .15s;
}
.phone-call-btn:hover, .phone-copy-btn:hover {
  background: #dbeafe;
}
.qr-zone img {
  margin-top: 0.3em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.11);
}
.fade-enter-active, .fade-leave-active { transition: opacity 0.25s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
@media (max-width: 700px) {
  .contact-float { 
    right: 12px; 
    bottom: 80px;
    top: auto;
    transform: none;
  }
  .contact-main-btn {
    padding: 12px 20px;
    font-size: 14px;
  }
  .contact-panel { 
    width: calc(100vw - 24px); 
    max-width: calc(100vw - 24px);
    position: fixed;
    bottom: 0;
    left: 12px;
    right: 12px;
    margin-top: 0;
    border-radius: 16px 16px 0 0;
  }
}
</style>
